
/**
 * 懒加载
 * @function init           初始化
 * @function bindEvent      事件绑定
 * @function load           图片加载
 * @function addListData    增加数据，并放到临时数组m_extra中
 * @function setListData    将临时数组数据放到总数组m_data中，并清空
 */
/**
 * 数组每一项item,包含属性
 * img: 图片dom元素
 * top: dom的offsetTop值
 * src: 图片路径
 */
class LazyLoad{
    constructor(){
        this.init.call(this);
    }
    init(){
        this.m_timer = null;            
        this.m_data = [];
        this.m_extra = [];                  // 临时数组
        this.m_cHeight = document.documentElement.clientHeight;
        this.bindEvent();
    }
    // 绑定事件
    bindEvent(){
        window.addEventListener("scroll",this.load.bind(this));
    }
    // 根据top值加载图片，并将临时数据放入总数据m_data中
    load(){
        if(this.m_timer !== null) return false;
        this.m_timer = setTimeout(()=>{
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            let min = scrollTop + this.m_cHeight;
            
            for(let i = 0, item; item = this.m_data[i];i++){
                if(item.top < min){
                    item.img.src = item.src;
                    this.m_data.splice(i,1);
                    i--;
                }
            }
            this.setListData();
            this.m_timer = null;
        },500);
    }
    // 设置要渲染的总数据
    setListData(){
        this.m_data = this.m_data.concat(this.m_extra);
        this.m_extra.length = 0;
    }
    // 将要懒加载的dom，放入临时数组中
    addListData(selector){
        let imgList = document.querySelectorAll(selector);
        this.m_extra = Array.from(imgList).map(item => {
            return {
                  img : item,
                  top : item.offsetTop,
                  src : item.getAttribute("data-src")
            }
        });
        if(this.m_data.length <= 0){
            this.setListData();
        }
        this.load();
    }
}
module.exports = LazyLoad;